import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Input,
  inject,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardBaseComponent } from './card-base.component';
import { VCard00Component } from './v-card01.component';
import { VCard01Component } from './v-card02.component';
import { CCard21Component } from './c-card11.component';
import { CCard22Component } from './c-card12.component';

@Component({
  selector: 'root-card',
  standalone: true,
  template: `
    <div #element class="card border-2 border-solid p-4 bg-white">
      {{ touch }}
      <div class="card-title font-mono">Root Card (Default)</div>
      <div class="card-title font-mono text-base">
        From @Input():
        <span
          *ngIf="checking; else elseTemplate"
          class="text-primary uppercase font-bold"
        >
          {{ obj.title }}
        </span>
        <ng-template #elseTemplate> not checking </ng-template>
      </div>
      <div class="card-body">
        <div class="flex flex-col w-full justify-between space-y-8">
          <app-v-card01 [obj]="obj">
            <app-c-card21 card1 [obj]="obj" />
            <app-c-card22 card2 [obj]="obj" />
          </app-v-card01>
          <app-v-card02 [obj]="obj">
            <app-c-card21 card1 [obj]="obj" />
            <app-c-card22 card2 [obj]="obj" />
          </app-v-card02>
        </div>
        <div class="card-actions mt-2">
          <button class="btn btn-primary" (click)="checking = !checking">
            Click Me
          </button>
        </div>
      </div>
    </div>
  `,
  styles: [],
  changeDetection: ChangeDetectionStrategy.Default,
  imports: [
    CommonModule,
    VCard00Component,
    VCard01Component,
    CCard21Component,
    CCard22Component,
  ],
})
export class CardComponent extends CardBaseComponent {
  @Input() obj: { title: string } = { title: '' };
  checking = false;
}
